<template>
  <!-- 用户资料部分 头像部分 -->
  <div class="tour_div" v-if="user_info">
    <!-- 背景部分 -->
    <div
      class="tour_bg"
      :style="{
        backgroundImage: `url('${getImgPath + img_path}')`,
        backgroundSize: '100%',
        backgroundPosition: 'center',
      }"
    ></div>
    <!-- 修改头像部分 -->
    <div class="update_header">
      <van-uploader
        accept="image/*"
        max-count="1"
        :after-read="afterRead"
      >
        <div
          v-if="!isLoading"
          class="user_header"
          :style="{
            backgroundImage: `url('${getImgPath + img_path}')`,
            backgroundSize: '100%',
            backgroundPosition: 'center',
          }"
        ></div>
        <div v-if="isLoading" >
          <van-loading size="0.24rem" vertical>图片上传中...</van-loading>
        </div>
      </van-uploader>
    </div>
    <!-- 昵称部分 -->
    <p class="user_nickname" v-if="user_info.nickName">
      {{ user_info.nickName }}
    </p>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "InfoHeader",
  props: ["user_info"],
  data() {
    return {
      img_path: this.user_info.Headpath,
      isLoading:false,// 是否为上传装调
    };
  },
  methods: {
    // 登录
    UserLogin() {
      this.$router.push("/login");
    },
    // 文件读取完毕
    async afterRead(file) {
      if (file.file.type.indexOf("image") == -1) {
        return this.$message({ position: "center", message: "请选择图片文件" });
      }
      this.isLoading = true;
      let fromData = new FormData();
      fromData.append("file", file.file);
      // 上传文件
      const { data: res } = await this.$http.post(
        "upload_userHeader",
        fromData,
        { headers: { "Content-Type": "multipart/form-data" } }
      );
      this.isLoading = false;
      if (!res.isok){
        this.$message({ position: "center", message: res.message })
        return;
      }
      this.$emit("toUpdate"); // 触发父级 更新
      this.img_path = res.data.Headpath;
    },
  },
  computed: {
    ...mapGetters("ImgPath", {
      getImgPath: "getImgPath",
    }),
  },
};
</script>
<style lang="less" scoped>
.tour_div {
  position: relative;
  height: 2.4rem;
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
}

.tour_bg {
  width: 100%;
  height: 100%;
  filter: blur(0.18rem);
}

.user_header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 100%;
  background-color: #999;
}

.user_nickname {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 120%);
  z-index: 1;
  font-size: 0.2rem;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0.05rem 0.04rem 0.03rem rgba(0, 0, 0, 0.8);
}

.login_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  z-index: 1;
  color: #ffffff;
  font-size: 0.14rem;
  background-color: #e74e4b;
  padding: 0.08rem 0.2rem;
  border-radius: 0.2rem;
  box-sizing: border-box;
  box-shadow: 0.05rem 0.04rem 0.03rem rgba(0, 0, 0, 0.5);
}

// .update_header{
//   position:absolute;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%,-50%);
//   font-size: 0.25rem;
//   font-weight: bold;
//   background-color: #ffffff;
//   border-radius: 100%;
//   width: 0.25rem;
//   height: 0.25rem;
//   text-align: center;
//   line-height: 0.21rem;
// }
.update_header{
  position:absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  .iconfont {
    position: absolute;
    right: -0.45rem;
    top: -0.1rem;
    background-color: #ffffff;
    border-radius: 100%;
    font-weight:bold;
    padding: 0.03rem;
  }
  /deep/.van-uploader__input-wrapper{
    width: 0.9rem;
    height: 0.9rem;
  }
}
</style>